<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <input type="button" value="发送请求Timeout" onclick="sendReqTimeout()">
    
    <input type="button" value="发送请求AbortController" onclick="sendReqAbortController()">
    <input type="button" value="取消请求AbortController" onclick="cancelReqAbortController()">
    
    <input type="button" value="发送请求CancelToken" onclick="sendReqCancelToken()">
    <input type="button" value="取消请求CancelToken" onclick="cancelReqCancelToken()">
  </body>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
  <script>
    // 超时取消
    function sendReqTimeout() {
      axios.get('http://localhost:9000/back_end_get/params?query_name=query', {
        signal: AbortSignal.timeout(2000) //取消请求配置
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.error(err); //CanceledError
      });
    }
    
    // AbortController手动取消
    let controller;
    function sendReqAbortController() {
      // 同一实例对象请求被取消后将不能再发送第二次请求
      controller = new AbortController();
      axios.get('http://localhost:9000/back_end_get/params?query_name=query', {
        signal: controller.signal //取消请求配置
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.error(err); //CanceledError
      });
    }
    function cancelReqAbortController() {
      // 取消请求
      controller.abort();
    }
    
    // CancelToken手动取消
    let source;
    function sendReqCancelToken() {
      // 同一实例对象请求被取消后将不能再发送第二次请求
      source = axios.CancelToken.source();
      axios.get('http://localhost:9000/back_end_get/params?query_name=query', {
        cancelToken: source.token //取消请求配置
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.error(err); //CanceledError{ message:'CancelToken手动取消' }
      });
    }
    function cancelReqCancelToken() {
      // 取消请求
      source.cancel('CancelToken手动取消');
    }
  </script>
</html>